<style scoped lang="less"></style>
<template>
  <iot-blk class="today-blk" title="今日警情" :moreType="0">
    <div class="total pointer" @click="moreModalVisible = true">
      <p class="fm-num">{{ data.allCount }}</p>
      <p>今日警报总数</p>
    </div>
    <!-- 消防物联网 -->
    <div class="stat flex" v-if="type == 'fireControl'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFireCount }}</p>
        <p>电气火灾</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayWaterCount }}</p>
        <p>消防水</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todaySmokeCount }}</p>
        <p>烟感报警</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayOtherCount }}</p>
        <p>其他报警</p>
      </div>
    </div>
    <!-- 建筑消防用水 -->
    <div class="stat flex" v-if="type == 'pool'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFireHydrantCount }}</p>
        <p>消防栓</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayWaterSprayCount }}</p>
        <p>自动水喷淋</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayPoolCount }}</p>
        <p>消防水池</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todaywaterTankCount }}</p>
        <p>高位水箱</p>
      </div>
    </div>
    <!-- 独立烟感 -->
    <div class="stat flex" v-if="type == 'smoke'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todaySmokeCount }}</p>
        <p>烟雾报警</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todaySignalCount }}</p>
        <p>信号异常</p>
      </div>
    </div>
    <!-- 可视化报警检测 -->
    <div
      class="stat flex"
      v-if="
        type == 'monitor' ||
          this.type == 'video' ||
          this.type == 'kitchen' ||
          this.type == 'health'
      "
    >
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFireCount }}</p>
        <p>火焰报警</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayPassWayCount }}</p>
        <p>消防通道</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayLeaveCount }}</p>
        <p>脱岗离岗</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayElectricVehicleCount || "0" }}</p>
        <p>电动车识别</p>
      </div>
    </div>
    <!-- 电气火灾 -->
    <div class="stat flex" v-if="type == 'fire' || type == 'chargingStation'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayVoltageCount }}</p>
        <p>电压</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayCurrentCount }}</p>
        <p>电流</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayTemperatureCount }}</p>
        <p>温度</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayLeakageCurrentCount }}</p>
        <p>漏电流</p>
      </div>
    </div>
    <!-- 可燃气 -->
    <div class="stat flex" v-if="type == 'gas'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayGasCount }}</p>
        <p>可燃气体</p>
      </div>
    </div>
    <!-- 灭火器 -->
    <div class="stat flex" v-if="type == 'extinguisher'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayEmbezzlementCount || "0" }}</p>
        <p>悬挂式灭火器</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayPressureCount || "0" }}</p>
        <p>手提灭火器</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayGasFireExtinguishingCount || "0" }}</p>
        <p>气体灭火</p>
      </div>
    </div>
    <!-- 自动联网报警 -->
    <div class="stat flex" v-if="type == 'auto'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFireAlarmCount }}</p>
        <p>火警</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFaultCount }}</p>
        <p>故障</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todaySystemEventCount }}</p>
        <p>系统事件</p>
      </div>
    </div>
    <!-- 水泵 -->
    <div class="stat flex" v-if="type == 'waterPump'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayVoltageCount }}</p>
        <p>电压故障</p>
      </div>
    </div>
    <!-- 智慧加油站 -->
    <div class="stat flex" v-if="type == 'gasStation'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayUnloadingAnalysisCount }}</p>
        <p>卸油分析</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayPersonnelDetectionCount }}</p>
        <p>人员监测</p>
      </div>
    </div>
    <!-- 智慧梯控 -->
    <div class="stat flex" v-if="type == 'ladderControl'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayElectricVehicleCount }}</p>
        <p>电动车识别</p>
      </div>
    </div>
    <!-- 智慧水域 -->
    <div class="stat flex" v-if="type == 'waters'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayAlertIdentificationCount }}</p>
        <p>警戒识别</p>
      </div>
    </div>
    <!-- 慧眼识别 -->
    <div class="stat flex" v-if="type == 'eye'">
      <div class="flex-1">
        <p class="fm-num">{{ data.todayFireCount }}</p>
        <p>火焰报警</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayPassWayCount }}</p>
        <p>消防通道</p>
      </div>
      <div class="flex-1">
        <p class="fm-num">{{ data.todayLeaveCount }}</p>
        <p>脱岗离岗</p>
      </div>
    </div>
    <!-- 仓库 -->
    <div class="stat flex wrap" v-if="type == 'warehouse'">
      <div>
        <p class="fm-num">{{ data.todayFireCount }}</p>
        <p>电气火灾</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayWaterCount }}</p>
        <p>消防水</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todaySmokeCount }}</p>
        <p>烟感报警</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayWaterImmersionCount }}</p>
        <p>水浸</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todaySmartEyeCount }}</p>
        <p>慧眼识别</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayFireExtinguisherEyeCount }}</p>
        <p>灭火器</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayGasCount }}</p>
        <p>气体</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount }}</p>
        <p>其他</p>
      </div>
      <!-- <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>温度</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>湿度</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>人员离岗</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>烟火识别</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>消防通道占用</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>安全帽识别</p>
      </div>
      <div>
        <p class="fm-num">{{ data.todayOtherCount || 0 }}</p>
        <p>工装识别</p>
      </div> -->
    </div>
    <!-- more start -->
    <el-dialog
      v-if="moreModalVisible"
      title="报警信息"
      :visible.sync="moreModalVisible"
      :width="950 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <List :type="type"></List>
    </el-dialog>
    <!-- more end -->
  </iot-blk>
</template>
<script>
import { mapState } from "vuex";
import List from "@/components/iot/AlarmList.vue";
export default {
  name: "Today",
  components: {
    List,
  },
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState(["scale"]),
  },
  watch: {},
  data() {
    return {
      loading: false,
      moreModalVisible: false,
    };
  },
  methods: {},
  created() {},
};
</script>
